{include file='public:header-css'/}
<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <div class="lyear-layout-sidebar-scroll"></div>
        <!--End 左侧导航-->
        <!--页面主要内容-->
        <div id="app" class="app">
            <div class="row app">
                <div class="col-lg-12 app">
                    <div class="card app">
                        <div class="card-toolbar">
                            <div class="toolbar-btn-action">
                                <a class="btn btn-label btn-theme" href="javascript:;" @click="confirm()"><label><i
                                        class="mdi mdi-checkbox-marked-circle-outline"></i></label> 确定</a>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <tbody>
                                    <template v-for="(item,index) in list">
                                        <tr class="parent" :key="item.id" :class="item.actClass">
                                            <td>
                                                <label class="lyear-checkbox checkbox-primary">
                                                    <input name="area[]" @click="checked(null,null,item,$event,1)" type="checkbox" v-model="area" class="checkbox-parent" :value="item.id">
                                                    <span> {{item.name}}</span>
                                                </label>
                                                &nbsp;<button class="rotate-btn" @click="rotateCircle(item)"><i class="mdi mdi-arrow-up-drop-circle"></i></button>
                                            </td>
                                        </tr>
                                        <template v-for="(child,index) in item.child">
                                            <tr class="child" :key="child.id" v-show="item.actClass">
                                                <td class="p-l-20">
                                                    <label class="lyear-checkbox checkbox-primary">
                                                        <input name="area[]" @click="checked(item,null,child,$event,2)" type="checkbox" v-model="area" class="checkbox-parent checkbox-child"  :value="child.id">
                                                        <span> {{child.name}}</span>
                                                    </label>
                                                </td>
                                            </tr>
                                            <tr class="son" v-show="item.actClass">
                                                <td class="p-l-40">
                                                    <label class="lyear-checkbox checkbox-primary checkbox-inline checkbox-inline" v-for="(son,index) in child.child" :key="son.id">
                                                        <input name="area[]" @click="checked(item,child,son,$event,3)" type="checkbox" v-model="area" class="checkbox-child" :value="son.id">
                                                        <span> {{son.name}}</span>
                                                    </label>
                                                </td>
                                            </tr>
                                        </template>
                                    </template>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--End 页面主要内容-->
    </div>
</div>
<style>
    .table > tbody > tr > td,.table > thead > tr > th{
        text-align: left;
    }
    .lyear-checkbox span::before{
        border-radius: 3px;
    }
    .checkbox-primary input:checked ~ span::before {
        background-color: var(--theme);
        border-color: var(--theme);
    }
    .lyear-radio{
        padding-left: 10px;
        margin: 0 auto;
    }
    .parent td{
        display: flex;
        align-items: center;
    }
    .parent td .rotate-btn{
        background: var(--theme);
        color: #fff;
        border: none;
        border-radius: 2px;
        width: 25px;
        height: 25px;
    }
    .parent td .rotate-btn .mdi{
        transition: 0.3s;
        display: block;
    }
    .parentAct td .rotate-btn .mdi{
        transform: rotate(180deg);
    }
    body{
        height: 100%;
    }
    .lyear-layout-web,.lyear-layout-container,#app{
        height: 100%;
        overflow: hidden;
    }
    .lyear-layout-sidebar-scroll{
        height: 0;
    }
    .app{
        height: 100%;
    }
    .card-body{
        height: calc(100% - 56px);
        overflow-y: scroll;
        box-sizing: border-box;
    }
</style>
<!--图片预览插件-->
<script type="text/javascript">
    var _this;
    var app = new Vue({
        el: '#app',
        data: {
            goods_index:-1,
            list: JSON.parse('{:json_encode($tree)}')|| [],
            area: JSON.parse('{:json_encode($area)}')|| [],
            area_text:JSON.parse('{:json_encode($area_text)}')||[]
        },
        created() {
            _this=this
        },
        methods: {
            checked(parent,child,item,event,type){
                let {checked}=event.target
                if (checked){
                    if(_this.area.indexOf(item.id)===-1){
                        _this.area.push(item.id)
                        _this.area_text.push(item.name)
                    }
                    if(item.child){
                        for (let i = 0; i < item.child.length; i++) {
                            let child=item.child[i]
                            if(_this.area.indexOf(child.id)===-1){
                                _this.area.push(child.id)
                                _this.area_text.push(child.name)
                            }
                            if(child.child){
                                for (let j = 0; j < child.child.length; j++){
                                    let son=child.child[j]
                                    if(_this.area.indexOf(son.id)===-1){
                                        _this.area.push(son.id)
                                        _this.area_text.push(son.name)
                                    }
                                }
                            }
                        }
                    }
                }else {
                    let itemIndex=_this.area.indexOf(item.id)
                    if (itemIndex!==-1){
                        _this.area.splice(itemIndex,1)
                        _this.area_text.splice(itemIndex,1)
                    }
                    if(item.child){
                        for (let i = 0; i < item.child.length; i++) {
                            let child=item.child[i]
                            let childIndex=_this.area.indexOf(child.id)
                            if (childIndex!==-1){
                                _this.area.splice(childIndex,1)
                                _this.area_text.splice(childIndex,1)
                            }
                            if(child.child){
                                for (let j = 0; j < child.child.length; j++){
                                    let son=child.child[j]
                                    let sonIndex=_this.area.indexOf(son.id)
                                    if (sonIndex!==-1){
                                        _this.area.splice(sonIndex,1)
                                        _this.area_text.splice(sonIndex,1)
                                    }
                                }
                            }
                        }
                    }
                }
                switch (type) {
                    case 1:
                        if(checked){
                            item.actClass="parentAct"
                        }
                        break;
                    case 2:
                        var allCheck=true
                        if(parent.child.length>0){
                            for (let i = 0; i < parent.child.length; i++) {
                                let child1=parent.child[i]
                                if(_this.area.indexOf(child1.id)===-1){
                                    allCheck=false
                                    break
                                }
                            }
                        }
                        if (allCheck){
                            if(_this.area.indexOf(parent.id)===-1){
                                _this.area.push(parent.id)
                                _this.area_text.push(parent.name)
                            }
                        }else {
                            let parentIndex=_this.area.indexOf(parent.id)
                            if (parentIndex!==-1){
                                _this.area.splice(parentIndex,1)
                                _this.area_text.splice(parentIndex,1)
                            }
                        }
                        break;
                    case 3:
                        var childAllCheck=true
                        for (let i = 0; i < child.child.length; i++) {
                            let child2=child.child[i]
                            if(_this.area.indexOf(child2.id)===-1){
                                childAllCheck=false
                                break
                            }
                        }
                        if (childAllCheck){
                            if(_this.area.indexOf(child.id)===-1){
                                _this.area.push(child.id)
                                _this.area_text.push(child.name)
                            }
                        }else {
                            let childIndex=_this.area.indexOf(child.id)
                            if (childIndex!==-1){
                                _this.area.splice(childIndex,1)
                                _this.area_text.splice(childIndex,1)
                            }
                        }
                        var allCheck1=true
                        if(parent.child.length>0){
                            for (let i = 0; i < parent.child.length; i++) {
                                let child1=parent.child[i]
                                if(_this.area.indexOf(child1.id)===-1){
                                    allCheck1=false
                                    break
                                }
                            }
                        }
                        if (allCheck1){
                            if(_this.area.indexOf(parent.id)===-1){
                                _this.area.push(parent.id)
                                _this.area_text.push(parent.name)
                            }
                        }else {
                            let parentIndex=_this.area.indexOf(parent.id)
                            if (parentIndex!==-1){
                                _this.area.splice(parentIndex,1)
                                _this.area_text.splice(parentIndex,1)
                            }
                        }
                        break;
                }
            },
            rotateCircle(item){
                item.actClass=item.actClass?"":"parentAct"
            },
            confirm(){
                if(_this.area.length==0){
                    showErrorMsg('请选择地区')
                    return
                }
                window.parent.confirmArea(_this.area,_this.area_text);
            }
        }
    });
    $(function () {
        layer.photos({
            photos: '.img'
            ,anim: 5
        });
    });
</script>
</body>
</html>
